<template>
  <div class="wooden-fish-container">
    <div class="background"></div>

    <!-- 动态莲花 -->
    <div v-for="n in 4" :key="'lotus'+n" class="lotus"></div>

    <!-- 香炉动画 -->
    <div class="incense"></div>
    <div v-for="n in 3" :key="'smoke'+n" class="incense-smoke"></div>

    <!-- 音效开关 -->
    <div class="sound-toggle" @click="toggleSound">
      <i :class="soundOn ? 'fas fa-volume-up' : 'fas fa-volume-mute'"></i>
    </div>

    <div class="header">
      <h1 class="title">电子功德木鱼</h1>
      <div class="subtitle">敲一敲木鱼，积一积功德 🙏</div>
    </div>

    <!-- 木鱼主体 -->
    <div
        class="wooden-fish"
        :class="{ 'active': isTapped }"
        @click="tapWoodenFish"
        @touchstart="tapWoodenFish"
    >
      <div class="fish-body">
        <div class="fish-texture"></div>
        <div class="fish-head">🐟</div>
      </div>

      <!-- 功德+1动画 -->
      <div class="merit-count">
        <transition name="count-up">
          <span v-if="showMerit" class="merit-number">+1</span>
        </transition>
      </div>
    </div>

    <!-- 功德榜 -->
    <div class="merit-board">
      <h2><i class="fas fa-scroll"></i> 功德榜 <i class="fas fa-scroll"></i></h2>
      <div class="merit-value">{{ meritCount }} 功德</div>
      <button class="reset-btn" @click="resetMerit">
        <i class="fas fa-redo"></i> 清零重修
      </button>
    </div>

    <!-- 禅意文案 -->
    <div class="zen-text">
      <p v-if="meritCount < 10">一花一世界，一木一浮生</p>
      <p v-else-if="meritCount < 50">静坐常思己过，闲谈莫论人非</p>
      <p v-else-if="meritCount < 100">菩提本无树，明镜亦非台</p>
      <p v-else-if="meritCount < 200">本来无一物，何处惹尘埃</p>
      <p v-else>功德圆满，福慧双修 🙏</p>
    </div>

    <!-- 操作提示 -->
    <div class="tap-hint">点击木鱼积累功德</div>

    <!-- 功德特效 -->
    <div
        v-for="(effect, index) in effects"
        :key="index"
        class="merit-effect"
        :style="effect.style"
    >
      +1
    </div>
  </div>
</template>

<script>
import { ref, onMounted } from 'vue'

export default {
  setup() {
    // 响应式数据
    const meritCount = ref(0)
    const isTapped = ref(false)
    const showMerit = ref(false)
    const soundOn = ref(true)
    const audioContext = ref(null)
    const effects = ref([])

    // 点击木鱼
    const tapWoodenFish = () => {
      if (soundOn.value) playSound()

      isTapped.value = true
      setTimeout(() => isTapped.value = false, 200)

      showMerit.value = true
      setTimeout(() => showMerit.value = false, 800)

      meritCount.value++
      addEffect()
    }

    // 重置功德
    const resetMerit = () => {
      meritCount.value = 0
      for (let i = 0; i < 5; i++) {
        setTimeout(() => addEffect(true), i * 100)
      }
    }

    // 音效开关
    const toggleSound = () => soundOn.value = !soundOn.value

    // 添加特效
    const addEffect = (isReset = false) => {
      const x = 50 + (Math.random() * 30 - 15)
      const effect = {
        style: {
          left: `${x}%`,
          bottom: `${40 + Math.random() * 10}%`,
          color: isReset ? '#ff6b6b' : '#ffd700',
          fontSize: isReset ? '3rem' : '2rem'
        }
      }

      effects.value.push(effect)
      setTimeout(() => {
        effects.value = effects.value.filter(e => e !== effect)
      }, 1500)
    }

    // 播放音效
    const playSound = () => {
      if (!audioContext.value) {
        audioContext.value = new (window.AudioContext || window.webkitAudioContext)()
      }

      const context = audioContext.value
      const oscillator = context.createOscillator()
      const gainNode = context.createGain()

      oscillator.connect(gainNode)
      gainNode.connect(context.destination)

      oscillator.type = 'sine'
      oscillator.frequency.setValueAtTime(400, context.currentTime)
      oscillator.frequency.exponentialRampToValueAtTime(50, context.currentTime + 0.3)

      gainNode.gain.setValueAtTime(0.3, context.currentTime)
      gainNode.gain.exponentialRampToValueAtTime(0.01, context.currentTime + 0.5)

      oscillator.start()
      oscillator.stop(context.currentTime + 0.5)
    }

    // 自动演示（可选）
    onMounted(() => {
      const autoPlay = setInterval(() => {
        if (meritCount.value < 5 && Math.random() < 0.3) {
          tapWoodenFish()
        }
      }, 1500)

      return () => clearInterval(autoPlay)
    })

    return {
      meritCount,
      isTapped,
      showMerit,
      soundOn,
      effects,
      tapWoodenFish,
      resetMerit,
      toggleSound
    }
  }
}
</script>

<style scoped>
/* 保持原有CSS样式不变，仅作必要调整 */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: 'Noto Serif SC', serif;
  background: #f5e6ca;
  min-height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
  position: relative;
}

.wooden-fish-container {
  max-width: 800px;
  width: 100%;
  text-align: center;
  padding: 20px;
  position: relative;
  z-index: 10;
}

.background {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: radial-gradient(circle at 20% 30%, #e9d8b6 0%, #f5e6ca 100%);
  z-index: -1;
}

.lotus {
  position: absolute;
  width: 100px;
  height: 100px;
  background: rgba(255, 255, 255, 0.3);
  border-radius: 50%;
  opacity: 0.3;
  animation: float 8s infinite ease-in-out;
}

.lotus:nth-child(1) {
  top: 10%;
  left: 15%;
  animation-delay: 0s;
}

.lotus:nth-child(2) {
  top: 70%;
  left: 80%;
  animation-delay: 2s;
}

.lotus:nth-child(3) {
  top: 30%;
  left: 75%;
  animation-delay: 4s;
}

.lotus:nth-child(4) {
  top: 80%;
  left: 20%;
  animation-delay: 6s;
}

@keyframes float {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  50% { transform: translateY(-20px) rotate(10deg); }
}

.header {
  margin-bottom: 30px;
}

.title {
  font-size: 3.5rem;
  color: #8b4513;
  text-shadow: 3px 3px 0 rgba(0, 0, 0, 0.1);
  margin-bottom: 10px;
  position: relative;
  display: inline-block;
}

.title:after {
  content: "";
  position: absolute;
  bottom: -10px;
  left: 50%;
  transform: translateX(-50%);
  width: 80%;
  height: 3px;
  background: linear-gradient(to right, transparent, #8b4513, transparent);
}

.subtitle {
  font-size: 1.5rem;
  color: #a0522d;
  margin-top: 20px;
}

.wooden-fish {
  width: 220px;
  height: 220px;
  margin: 0 auto;
  position: relative;
  cursor: pointer;
  transition: transform 0.3s;
  transform-origin: center bottom;
}

.wooden-fish.active {
  transform: translateY(-15px) rotate(3deg);
}

.fish-body {
  position: absolute;
  width: 100%;
  height: 100%;
  background: #8b4513;
  border-radius: 50%;
  box-shadow:
      0 15px 30px rgba(0, 0, 0, 0.3),
      inset 0 -10px 20px rgba(0, 0, 0, 0.4),
      inset 0 10px 20px rgba(255, 255, 255, 0.1);
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
  z-index: 2;
}

.fish-texture {
  position: absolute;
  width: 90%;
  height: 90%;
  border-radius: 50%;
  background:
      linear-gradient(45deg, transparent 40%, rgba(0, 0, 0, 0.1) 50%, transparent 60%),
      radial-gradient(circle, #a0522d 0%, #8b4513 100%);
  box-shadow: inset 0 0 30px rgba(0, 0, 0, 0.5);
}

.fish-head {
  font-size: 5rem;
  position: relative;
  z-index: 3;
  color: #ffe4b5;
  text-shadow: 3px 3px 0 rgba(0, 0, 0, 0.2);
  transform: rotate(-15deg);
}

.merit-count {
  position: absolute;
  top: -30px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 1.8rem;
  font-weight: bold;
  color: #ffd700;
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5);
  z-index: 10;
}

.count-up-enter-active {
  animation: count-up 1.2s ease-out;
}

@keyframes count-up {
  0% {
    transform: translateX(-50%) translateY(0) scale(1);
    opacity: 1;
  }
  50% {
    transform: translateX(-50%) translateY(-40px) scale(1.5);
    opacity: 0.8;
  }
  100% {
    transform: translateX(-50%) translateY(-80px) scale(0.8);
    opacity: 0;
  }
}

.merit-board {
  background: rgba(255, 255, 255, 0.7);
  padding: 25px;
  border-radius: 20px;
  margin: 40px auto;
  max-width: 400px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
  border: 2px solid #d2b48c;
  position: relative;
}

.merit-board:before {
  content: "";
  position: absolute;
  top: 10px;
  left: 10px;
  right: 10px;
  bottom: 10px;
  border: 1px solid #8b4513;
  border-radius: 15px;
  pointer-events: none;
}

.merit-board h2 {
  color: #8b4513;
  font-size: 2rem;
  margin-bottom: 20px;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 15px;
}

.merit-value {
  font-size: 3rem;
  font-weight: bold;
  color: #d2691e;
  margin: 20px 0;
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.2);
}

.reset-btn {
  background: linear-gradient(to bottom, #d2b48c, #a0522d);
  color: white;
  border: none;
  padding: 12px 30px;
  border-radius: 30px;
  font-size: 1.3rem;
  cursor: pointer;
  transition: all 0.3s ease;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-top: 15px;
}

.reset-btn:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.3);
}

.reset-btn:active {
  transform: translateY(1px);
}

.zen-text {
  margin-top: 30px;
  font-size: 1.8rem;
  color: #8b4513;
  padding: 15px;
  border-radius: 15px;
  background: rgba(255, 255, 255, 0.5);
  display: inline-block;
  max-width: 90%;
  animation: floatText 3s infinite alternate ease-in-out;
}

@keyframes floatText {
  from { transform: translateY(0); }
  to { transform: translateY(-10px); }
}

.sound-toggle {
  position: absolute;
  top: 20px;
  right: 20px;
  width: 50px;
  height: 50px;
  background: rgba(255, 255, 255, 0.7);
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
  z-index: 20;
}

.sound-toggle i {
  font-size: 1.5rem;
  color: #8b4513;
}

.tap-hint {
  position: absolute;
  bottom: 30px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 1.2rem;
  color: #a0522d;
  animation: pulse 1.5s infinite;
}

@keyframes pulse {
  0%, 100% { opacity: 0.5; transform: translateX(-50%) scale(1); }
  50% { opacity: 1; transform: translateX(-50%) scale(1.1); }
}

.merit-effect {
  position: absolute;
  font-size: 2rem;
  color: #ffd700;
  opacity: 0;
  animation: meritFloat 1.5s ease-out;
  pointer-events: none;
}

@keyframes meritFloat {
  0% { opacity: 1; transform: translateY(0) scale(1); }
  100% { opacity: 0; transform: translateY(-100px) scale(1.5); }
}

.incense {
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 3px;
  height: 100px;
  background: linear-gradient(to top, #8b4513, #d2b48c);
  z-index: 1;
}

.incense:before {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 15px;
  height: 15px;
  background: linear-gradient(45deg, #ff9900, #ff6600);
  border-radius: 50%;
  box-shadow: 0 0 15px #ff6600;
  animation: burn 3s infinite alternate;
}

@keyframes burn {
  0%, 100% { opacity: 0.8; }
  50% { opacity: 1; transform: translateX(-50%) scale(1.2); }
}

.incense-smoke {
  position: absolute;
  top: 0;
  left: 50%;
  width: 8px;
  height: 100px;
  background: linear-gradient(to top, rgba(255, 255, 255, 0.8), transparent);
  border-radius: 50%;
  filter: blur(5px);
  animation: smoke 8s infinite linear;
}

.incense-smoke:nth-child(2) {
  left: calc(50% - 20px);
  animation-delay: 2s;
  height: 120px;
}

.incense-smoke:nth-child(3) {
  left: calc(50% + 20px);
  animation-delay: 4s;
  height: 140px;
}

@keyframes smoke {
  0% { transform: translateY(0) scale(1); opacity: 0; }
  20% { opacity: 0.5; }
  100% { transform: translateY(-100vh) scale(4); opacity: 0; }
}

@media (max-width: 600px) {
  .title { font-size: 2.5rem; }
  .subtitle { font-size: 1.2rem; }
  .wooden-fish { width: 180px; height: 180px; }
  .fish-head { font-size: 4rem; }
  .merit-value { font-size: 2.5rem; }
  .zen-text { font-size: 1.4rem; }
}
</style>